<template>
  <div class="app-container" id="rebateProduct">
      <div class="sel">
        <span>请选择商家：</span>
        <el-select v-model="companyId" placeholder="请选择商家"  @change="getProductList" >
        <el-option
          v-for="item in options"
          :key="item.companyId"
          :label="item.companyName"
          :value="item.companyId">
        </el-option>
      </el-select>
      </div>
      <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row max-height="550" class="ProductTable">
        <el-table-column label="投资类型" align="center" width="80">
          <template slot-scope="scope">
            {{scope.row.investType=='0'?'首投':'复投'}}
          </template>
        </el-table-column>
        <el-table-column label="项目名称" align="center" width="200">
          <template slot-scope="scope">
            <span>{{scope.row.projectType}}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目编码" align="center" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.productNo}}</span>
          </template>
        </el-table-column>
        <el-table-column label="起投金额" align="center" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.subscriptionOrigin}}</span>
          </template>
        </el-table-column>
        <el-table-column label="投资期限" align="center" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.term}}</span>
          </template>
        </el-table-column>
        <el-table-column label="返利比例" align="center" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.profitPercent}}</span>
          </template>
        </el-table-column>
        <el-table-column label="比例上限" align="center" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.profitPercentMax}}</span>
          </template>
        </el-table-column>
        <el-table-column label="返利金额" align="center" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.profit}}</span>
          </template>
        </el-table-column>
         <el-table-column label="综合利率" align="center" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.allInRate}}</span>
          </template>
        </el-table-column>
         <el-table-column label="超级返金额" align="center" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.extraProfit}}</span>
          </template>
        </el-table-column>
         <el-table-column label="超级返时间" align="center" min-width="200">
          <template slot-scope="scope">
            <span v-show="scope.row.extraBeginDate != null">{{dateFormat(scope.row.extraBeginDate)}}~{{dateFormat(scope.row.extraEndDate)}}</span>
          </template>
        </el-table-column>
          <el-table-column label="状态" align="center" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.approve==0?'未审核':scope.row.approve==1?'审核通过':'审核不通过'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="操作" width="250" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="audit(scope,'1')">审核通过</el-button>
            <el-button type="danger" size="mini" @click="audit(scope,'2')">审核不通过</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="curPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="size">
        </el-pagination>
      </div>
    </div>
</template>

<script>
import moment from 'moment'
import { companySelectList } from 'api/business'
import { productList, productApprove } from 'api/product'
export default {
  data() {
    return {
      list: null,
      listLoading: true,
      options: [],
      companyId: '',
      size: 0,
      pageSize: 10,
      curPage: 1
    }
  },
  created() {
    this.getBusinessList()
  },
  beforeDestroy() {
    sessionStorage.removeItem('businessId')
  },
  computed: {
    route() {
      return this.$route
    }
  },
  methods: {
    dateFormat(parm) {
      return moment(new Date(parm)).format('YYYY-MM-DD')
    },
    // 获取商家列表
    async getBusinessList() {
      try {
        let back = await companySelectList()
        back = back.data
        if (back.resultCode === '200') {
          this.options = back.result
          this.companyId = back.result[0].companyId
          this.getProductList()
        }
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
    },
    // 获取列表
    async getProductList() {
      const parm = {
        pageSize: this.pageSize,
        curPage: this.curPage - 1,
        productType: 1,
        companyId: this.companyId,
        investType: ''
      }
      try {
        let back = await productList(parm)
        back = back.data
        if (back.resultCode === '200') {
          this.list = back.result
          this.size = back.size
          this.listLoading = false
        } else {
          this.$alert(back.msg, '提示')
        }
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
    },
    async audit(scope, approveType) {
      const parm = {
        productId: scope.row.id,
        approveType: approveType
      }
      try {
        let back = await productApprove(parm)
        back = back.data
        if (back.resultCode === '200') {
          this.getProductList()
        } else {
          this.$alert(back.msg, '提示')
        }
        console.log(back)
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getProductList()
    },
    handleCurrentChange(val) {
      this.curPage = val
      this.getProductList()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .ProductTable{
    margin-top:80px;
  }
  .buttonBox{
    overflow: hidden;
    .button{
      float: left;
      width:200px;
      height:40px;
      line-height: 40px;
      border-radius: 5px;
      margin:40px ;
      color:white;
      background: #409EFF;
      text-align: center;
      cursor: pointer;
    }
  }
  .sel{
    float: left;
    &:nth-child(2){
      margin-left:20px;
    }
  }
  .block{
    float: right;
    margin-top:10px;
  }
  .addButton{
    float: left;
  }
</style>
